<template>
  <div>
    <el-table ref="multipleTable" :data="tableData" border size="mini" style="width: 100%"
              tooltip-effect="dark" @selection-change="handleSelectionChange" stripe>
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="昵称">
        <template slot-scope="scope">
          <span>{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="头像地址">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatarUrl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column align="center" label="注册时间">
        <template slot-scope="scope">
          <span>{{ scope.row.registerDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="退出时间">
        <template slot-scope="scope">
          <span>{{ scope.row.lastLoginDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="年级">
        <template slot-scope="scope">
          <span>{{ scope.row.phonenumber }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="真实姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.realname }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.sex" size="mini">{{ scope.row.sex }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="学号">
          <template slot-scope="scope">
              <span>{{ scope.row.schoolcode }}</span>
          </template>
      </el-table-column>
      <el-table-column align="center" label="学校">
          <template slot-scope="scope">
              <span>{{ scope.row.school }}</span>
          </template>
      </el-table-column> -->
      <el-table-column align="center" label="操作" prpo="right" width="200">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="updateButton(scope.row)">修改</el-button>
          <el-button type="text" @click="deleteButton(scope.row)">删除</el-button> -->
          <el-link icon="el-icon-edit" type="primary" class="operation" @click="updateButton(scope.row)">编辑</el-link>
          <el-link icon="el-icon-delete" type="primary" class="operation" @click="open(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:center">
      <h1></h1>
      <el-pagination :page-size="100" :page-sizes="[8, 16, 24, 32]"
                     :total="total" layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {listT_Wxuserinfo, totalT_Wxuserinfo, deleteT_Wxuserinfo} from "@/api/t_wxuserinfoServer";

export default {
  name: "t_wxuserinfoTable",
  data() {
    return {
      isSelected: false, // 当前是否查询
      selectForm: {}, // 查询用的临时表单
      pageSize: 8, // 每页数据量
      currpage: 1, // 当前页码
      total: 0, // 表格数据总条数
      multipleSelection: [], // 存放当前选中的数据
      tableData: [],  // 存放表格数据
    }
  },
  mounted() {
    this.total = this.tableData.length;
    this.$bus.$on('t_wxuserinfoUpDataTable', this.upData)      // 显示更新表格
    this.upData(); //需要触发的函数
  },
  methods: {
    open(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.deleteButton(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除按钮
    deleteButton(message) {
      deleteT_Wxuserinfo({"id": message.id}).then(response => {
        // 删除成功
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
    },
    // 修改按钮
    updateButton(message) {
      this.$bus.$emit('t_wxuserinfoUpdateOpen', message)
    },
    // 更新表格数据
    upData() {
      this.selectForm['current'] = this.currpage
      this.selectForm['size'] = this.pageSize
      if (this.isSelected) {
        selectT_Wxuserinfo(this.selectForm).then(response => {
          this.total = Number(response.data.msg);
          this.tableData = response.data.data;
        });
      } else {
        listT_Wxuserinfo(this.selectForm).then(response => {
          this.total = Number(response.data.msg);
          this.tableData = response.data.data;
        });
      }
    },
    // 表格内容选中时调用的函数
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表格修改每页大小时调用的函数
    handleSizeChange(val) {
      this.pageSize = val;
      this.upData();
    },
    // 表格换页时调用的函数
    handleCurrentChange(val) {
      this.currpage = val;
      this.upData();
    },
  }
}
</script>
<style scoped>
.operation {
  margin-right: 10px;
}

</style>
